<template>
  <div class="lang-box display-flex justify-content-flex-end">
    <el-dropdown
      trigger="click"
      class="international"
      @command="handleSetLanguage"
    >
      <div>{{ $t("change_lang.title")}}</div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :disabled="language === 'zh'" command="zh">
          中文
        </el-dropdown-item>
        <el-dropdown-item :disabled="language === 'en'" command="en">
          English
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  computed: {
    language() {
      return this.$store.getters.language; //这里我用getters处理，代码不贴了，你么你随意
    },
  },
  methods: {
    handleSetLanguage(lang) {
      // 通过VueI18n的根实例设置当前的语言环境  不懂请看文档 http://kazupon.github.io/vue-i18n/zh/api/#%E9%9D%99%E6%80%81%E5%B1%9E%E6%80%A7
      this.$i18n.locale = lang;
      this.$store.dispatch("app/setLanguage", lang);
      this.$message({
        message: this.$t("change_lang.msg"),
        type: "success",
      });
    },
  },
};
</script>
<style scoped>
.lang-box {
  text-align: right;
  margin-bottom: 10px;
}
.lang-box /deep/ .el-dropdown-selfdefine {
  /* color: #fff !important; */
  cursor: pointer;
}
</style>